@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
* { margin: 0; padding: 0;}
body { color: #777575; font-size: 18px; font-weight: 400; background: #F8F9F9; line-height: 1.4; overflow-x: hidden; font-family: 'Roboto', sans-serif;}
a, i, .btn, button, img, span, .dropdown-item, .hover-translate { -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s;}
dl, ol, ul { margin-bottom: 0;}
a { color: #777575; text-decoration: none;}
h1, h2, h3, h4, h5, h6 { padding-bottom: 20px; margin: 0; color: #002248;}
h1 { font-size: 46px; font-weight: 700;}
h2 { font-size: 40px; font-weight: 700;}
p { line-height: 1.5; padding-bottom: 20px; margin: 0; font-size: 16px;}
img { max-width: 100%; vertical-align: middle;}
h1 { font-weight: 600; font-size: 24px; line-height: 33px; color: #000; padding: 0 0 30px 0;}
ul { margin: 0px; padding: 0;}
li{ list-style: none;}
.container { max-width: 1170px;}
.headcommon { padding: 0 0 45px 0;}
.pt-60 { padding-top: 60px;}
.pb-60 { padding-bottom: 60px;}
.headcommon h2 { position: relative; padding: 0 0 12px 0;}
.headcommon h2:after { position: absolute; width: 100px; height: 4px; left: 50%; transform: translate(-50%, 0%); bottom: 0; background: #E0AA4B; content: "";}
.gra-bg { background: #f5f6f8;}
.blue-bg { background: #002248 !important;}
.dropdown-divider { height: 0; margin: 0.5rem 0; overflow: hidden; border-top: 1px solid #eaecf4;}
.notification-dropdown .dropdown-menu li a.logouttext { color: #fb0e0e;}
.text-right{ text-align: right;}
select.form-control { background: #fff url("../img/down.svg") 96% 18px no-repeat; background-size: 14px; }
.btn{ display: inline-block !important;}
.btn-blue{ background: #002248; color: #fff; display: inline-block;}
.btn-blue:hover{ background:#043d7c; color: #fff;}
.btn-yallow{ background: #E0AA4B; color: #fff; display: inline-block;}
.btn-yallow:hover{ background: #da9926; color: #fff;}
.btn-gray{ background: #ccc; color: #043d7c; display: inline-block;}
.btn-gray:hover{ background: #da9926; color: #043d7c;}
.mr-3{ margin-right: 20px !important}
.form-group{ margin-bottom: 20px;}
.form-control{ border-radius: 10px; border: 1px solid #CCC; height: 48px;}
.form-control:focus{ box-shadow: inherit;}
.tableview table{ width: 100%;}
.tableview table thead tr{  background: url(../img/tabletrbg.png) center top no-repeat; background-size: cover;}
.tableview table tr th.first{ width: 35%}
.tableview table tr th{ font-size: 14px; color: #002248; padding: 10px;}
.tableview table tr td{ font-size: 14px; color: #434445; padding:12px 10px;}
.tableview table tr:nth-of-type(even) td{background: rgba(224, 170, 75, 0.08);}
.tableview table tr td.first{ width: 35%}
.tableview table tr td .btn{ padding: .285rem .75rem .275rem; font-size: 0.85rem}
.dashboardryt{ position: relative; padding-top: 85px;}

.tableview table tr:nth-of-type(even) td.breadTable{ border-top: 1px solid #ccc; background: #fff; padding-bottom: 0px;}
.breadTable .btn-prev{ border-radius: 3px; background: #345172; color: #fff; font-size: 13px; padding: 5px 8px; margin-right: 3px;}
.breadTable .btn-next{ border-radius: 3px; background: #345172; color: #fff; font-size: 13px; padding: 5px 8px; margin-left: 3px;}
.breadTable .btn-prev:hover, .breadTable .btn-next:hover{ background: #002248;}


/* ============================navbar */
.dashboard { padding: 15px 15px 15px 275px;}
.navbar-main { background: #002248; box-shadow: 0px 0px 14px rgba(9, 65, 129, 0.26); border-radius: 15px;   padding: 0; position: fixed; width: 235px; top: 15px; bottom: 10px; left: 15px;}
.navbar-nav { list-style: none;}
.logo { display: block; padding: 0 0 30px 0;}
.logo-m { display: none;}
.navbar-nav li a { font-size: 16px; font-weight: 600; color: #fff; position: relative; padding: 18px 0 18px 45px !important;}
.navbar-nav li a:hover { color: #e0aa4b;}
.navbar-nav li a span { position: absolute; left: 10px;}
.navbar-nav li a em { font-style: normal;}
.navbar-nav li a:hover { background: #001328;}
.head .dropdown-toggle { width: 46px; height: 46px; border-radius: 100%; background: #E6F5FA; border: 0;  padding: 0;}
.user-main button img { width: 20px;}
.head .dropdown-toggle::after { display: none;}
.head .user-main .dropdown-toggle { background: #E0AA4B; margin: 0 0 0 25px;}
.head .dropdown-toggle:focus { box-shadow: none;}
.notification-dropdown .dropdown-menu { width: 100%; min-width: 260px; right: 0 !important; left: auto !important; transform: inherit !important; top: 50px !important; padding: 10px;}
.notificationtext { padding: 10px 0;}
.notificationhead { padding: 0 10px;}
.notificationtextlft { padding: 8px 12px;  border-bottom: 1px solid #00000026;}
.notificationtext .notificationtextlft:last-child { border: 0;}
.notificationtextryt h6 { padding: 0;}
.notificationimg { width: 13%;}
.notificationtextryt { width: 90%;}
.notificationtextryt p { font-size: 14px;  padding: 0;}
.notificationtext { padding: 10px 0; overflow-y: scroll; height: 237px;}
.notificationtext::-webkit-scrollbar { width: 0;}
.notificationhead h6 { padding: 0;}
.notificationhead a { color: #2a2aed; font-size: 14px;}
.user-name { padding: 0 0 0 10px; font-size: 16px; color: #002248; font-weight: 500;}
.notification-dropdown .dropdown-menu.show { box-shadow: 2px 0 27px rgb(203 203 218 / 20%) !important;}
.user-main ul li { position: relative;}
.notification-dropdown .dropdown-menu li a { font-weight: 400; color: #3a3b45; font-size: 14px;}
.headryt .dropdown-menu { border: 0;}
.logouttext { color: #ed1414 !important;}
.cardwrapp:after { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: rgba(255, 255, 255, 0.4); -webkit-transition: none; -moz-transition: none; transition: none;}
.cardwrapp:hover:after { width: 100%; background-color: rgb(255 255 255 / 10%); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}
.user-name span { display: block;}
.cardwrapp { background: #FFEEE2; border-radius: 15px; padding: 15px; box-shadow: #fce2cf 5px 5px 0px;  margin: 0 0 25px 0; position: relative; z-index: 0;}
.cardwrapp.box-bg2 { background: #DDFCDF; box-shadow: #C7F4CA 5px 5px 0px;}
.cardwrapp.box-bg2 .cardheadlft { background: #A6DEAA;}
.cardwrapp.box-bg2 .accesstext { background: #C7F4CA;}
.cardwrapp.box-bg3 { background: #F4F5F9; box-shadow: #DDE1F2 5px 5px 0px;}
.cardwrapp.box-bg3 .cardheadlft { background: #A4A4A4;}
.cardwrapp.box-bg3 .accesstext { background: #D6DCF7;}
.cardwrapp.box-bg4 { background: #E6F5FA; box-shadow: #CCEAF4 5px 5px 0px;}
.cardwrapp.box-bg4 .cardheadlft { background: #74C1DB;}
.cardwrapp.box-bg4 .accesstext { background: #C0E9F6;}
.cardwrapp.box-bg5 { background: #FFEAC6; box-shadow: #FFDDA2 5px 5px 0px;}
.cardwrapp.box-bg5 .cardheadlft { background: #FEC868;}
.cardwrapp.box-bg5 .accesstext { background: #FFDDA2;}
.cardwrapp.box-bg6 { background: #E8D5FF; box-shadow: #D4B0FF 5px 5px 0px;}
.cardwrapp.box-bg6 .cardheadlft { background: #BB82FF;}
.cardwrapp.box-bg6 .accesstext { background: #D4B0FF;}
.box-bg1 .accesstext:hover { background: #fbcba9; color: #002248;}
.box-bg2 .accesstext:hover { background: #a6ebab; color: #002248;}
.box-bg3 .accesstext:hover { background: #bfc8f3; color: #002248;}
.box-bg4 .accesstext:hover { background: #92d3e7; color: #002248;}
.box-bg5 .accesstext:hover { background: #f9d088; color: #002248;}
.box-bg6 .accesstext:hover { background: #b68be9; color: #002248;}
.cardheadlft { background: #FBBA8D; border-radius: 12px; width: 55px; height: 55px; margin: 0 30px 0 0;}
.cardwrapp h6 {font-size: 16px; font-weight: 600; padding: 0;}
.cardhead { padding: 0 0 30px 0;}
.accesstext { font-weight: 600; font-size: 16px; background: #FFDBC1; border-radius: 5px; display: inline-block; padding: 11px 23px; color: #002248; z-index: 2; position: relative;}
.dashboard.pl-15{ padding-left: 15px;}
.Performancepage h3{ font-size: 22px; color: #002248; font-weight: 600; margin-bottom: 20px; padding: 0px;}
.Performancepage .card{ background: #F2F4F6; border: 0px; border-radius: 10px;}
.Performancepage .card-header { border-bottom:1px solid #c8c8c8; padding: .85rem 1rem; font-size: 18px; color: #002248; font-weight: 600;}
.overall-title{ font-size: 4rem; color: #002248; font-weight: bold; padding: 20px 0;}
.red-color{ color: #F64E60;}
.card{ margin-bottom: 20px;}
/* ============================navbar */
.dashboard { padding: 15px 15px 15px 275px;}
.logo { display: block;	padding: 15px;}
.head { box-shadow: 0px 1.094px 22px -1.094px rgba(0, 0, 0, 0.25); border-radius: 6px; background: url(../img/dashheadbg.png) left top no-repeat; background-size: 100%; padding: 5px; margin-bottom: 30px; position: fixed !important; top: 15px; left: auto; right: 15px; width: calc(100% - 290px); z-index: 999;}
.head h1 { font-weight: 600; line-height: 33px; padding: 0 0 30px 0;    position: absolute; left: 20px; top: 12px; display: inline-block; font-size: 18px; color: #002248;}
.head .dropdown-toggle { width: 46px; height: 46px; border-radius: 5px; background: none; border: 0;	padding: 0;}
.user-main button img { width: 20px;}
.head .dropdown-toggle::after { display: none;}
.head .user-main .dropdown-toggle { background: #E0AA4B; margin: 0 0 0 25px;}
.head .dropdown-toggle:focus { box-shadow: none;}
.notification-dropdown .dropdown-menu { width: 100%; min-width: 260px; right: 0 !important; left: auto !important;  transform: inherit !important; top: 50px !important; padding: 10px;}
.notificationtext { padding: 10px 0;}
.notificationhead { padding: 0 10px;}
.notificationtextlft { padding: 8px 12px; border-bottom: 1px solid #00000026;}
.notificationtext .notificationtextlft:last-child { border: 0;}
.notificationtextryt h6 { padding: 0;}
.notificationimg { width: 13%;}
.notificationtextryt { width: 90%;}
.notificationtextryt p { font-size: 14px; padding: 0;}
.notificationtext { padding: 10px 0; overflow-y: scroll; height: 237px;}
.notificationtext::-webkit-scrollbar, .questiono ul::-webkit-scrollbar { width: 0;}
.notificationhead h6 { padding: 0;}
.notificationhead a { color: #2a2aed; font-size: 14px;}
.dashwrap .card{ border-radius: 10px; border: 0.394px solid var(--White, #FFF); background: linear-gradient(277deg, rgba(255, 255, 255, 0.70) 26.06%, rgba(255, 255, 255, 0.95) 77.72%); box-shadow: 0px 1.094px 21.315px -1.094px rgba(0, 0, 0, 0.04); backdrop-filter: blur(9.688861846923828px); padding: 15px; position: relative; margin-bottom: 30px}
.dashwrap .card h2{ color: #E0AA4B; font-size: 32px; font-weight: 700; line-height: 32px; padding-bottom: 10px;}
.dashwrap .card h3{ color: #002248; font-size: 18px; font-weight: 700; line-height: 26px; padding-bottom: 10px;}
.dashwrap .card h3 span{ font-weight: 400; color: #626262; font-size: 16px;}
.dashwrap .card p{ color: #626262; font-size: 16px; line-height: 32px; margin: 0px; padding: 0px;}
.dashwrap .card span.topview{ position: absolute; right: 20px; top: 22px;}
.dashwrap .card span.topview img{ width: 55px; height: auto;}
.dashwrap .card .couresbx.card-body{ overflow-y: scroll; height: 320px; padding-right: 10px !important;}
.dashwrap .card .activitywb.card-body{ overflow-y: scroll; height: 320px; padding-right: 10px !important;}
.dashwrap .card .chatlist.card-body{ overflow-y: scroll; height: 320px; padding-right: 10px !important;}
.dashwrap .card .sessionbx.card{ height: 320px;}

/* SCROLL START */
.dashwrap .card .card-body::-webkit-scrollbar, .TrainerProfile .card .card-body::-webkit-scrollbar { width: 8px; border-radius: 5px;}
.dashwrap .card .card-body::-webkit-scrollbar-track, .TrainerProfile .card .card-body::-webkit-scrollbar-track { background: #E2ECF7; border-radius: 5px;}
.dashwrap .card .card-body::-webkit-scrollbar-thumb, .TrainerProfile .card .card-body::-webkit-scrollbar-thumb { background-color: #002248; border-radius: 5px;}
/* SCROLL END */

.dashwrap .card .activitywb ul{ margin: 0px; padding: 0px;}
.dashwrap .card .activitywb li{ margin-bottom: 10px; color: #626262; font-size: 16px; list-style: none; position: relative; padding: 10px 10px 10px 70px; height: 75px; border-bottom: 1px solid #eee;}
.dashwrap .card .activitywb li strong{ color: #002248; font-weight: 700;}
.dashwrap .card .bdr-noti{ border-radius: 3px; border: 1px solid #ccc; display: inline-block; padding: 0 5px}
.dashwrap .card .date{ display: block;}
.dashwrap .card .profileview{ position: absolute; left: 0; top: 8px;}
.date-txt{ font-size: 15px; color: #002248; margin-bottom: 10px;}
.dashwrap .card .couresbx.card-body ul{ margin: 0px; padding: 0px;}
.dashwrap .card .couresbx.card-body li{ margin-bottom: 10px; border-radius: 6px; background: #E6F5FA; padding: 12px; color: #002248; font-size: 16px; font-weight: 600; list-style: none;}
.dashwrap .card .couresbx.card-body li:nth-child( even ){ background: #FFEEE2;}
.dashwrap .card .couresbx.card-body li span{ position: inherit; left: inherit; top: inherit; margin-right: 10px; display: inline-block;}
.dashwrap .card .couresbx.card-body li span img{ width: 22px; height: auto;}
.form-control.down{ height: 44px}
.classlog table{ width: 100%;}
.classlog table thead tr{  background: url(../img/tabletrbg.png) center top no-repeat; background-size: cover;}
.classlog table tr th.first{ width: 45%}
.classlog table tr th{ font-size: 14px; color: #002248; padding: 10px;}
.classlog table tr td{ font-size: 14px; color: #434445; padding: 10px;}
.classlog table tr td.first{ width: 45%}
.btn-green{ border-radius: 5px; border: 1px solid #81F5B7; background: #B4FDD6; padding: 7px 10px; display: inline-block; font-size: 12px; color: #002248;}
.btn-red{ border-radius: 5px; border: 1px solid #FFC6C3; background: #FFEEE2; padding: 7px 10px; display: inline-block; font-size: 12px; color: #002248;}
.dashwrap .card .chatlist.card-body ul{ margin: 0px; padding: 0px;}
.chatlist.card-body li{ border-top: 1px solid #D6D1D1; padding: 10px 10px 10px 65px; position: relative; height: 75px; list-style: none;}
.chatlist.card-body h4{ font-size: 17px; color: #002248; font-weight: 600; margin: 0px; padding: 0px;}
.chatlist.card-body p{ font-size: 14px; color: #626262; margin: 0px; padding: 0px;}
.chatlist.card-body li span{ position: absolute; left: 0; top: 10px;}
/* Chart */
.circular-chart { display: block; margin: 10px auto; max-width: 80%; max-height: 250px;}
.circle-bg { fill: none; stroke: #F3F3F3; stroke-width: 1.8;}
.circle { fill: none; stroke-width: 2.8; stroke-linecap: round; animation: progress 1s ease-out forwards;}
@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}
.circular-chart.orange .circle { stroke: #002248;}
.percentage { fill: #002248; font-size: 8px; text-anchor: middle; font-weight: 600;}
.title{ text-align: center; font-size: 16px; color: #002248; font-weight: 600; padding: 7px 0 15px;}

.wallet{ font-size: 55px; font-weight: 700; color: #E0AA4B; line-height: 50px; margin: 20px 0;}
.wallet img{ width: 60px; height: auto; margin-right: 5px; vertical-align: -5px;}

/* LOGIN PAGE CSS */
.loginpage{ width: 100%; position: relative; background: #002248;}
.logo-login{ width: 223px; height: 80px; position: absolute; left: 30%; top: 20px; background: url(../img/login-logo.png) center top no-repeat;}
.loginLeft{ height: 100vh; width: 50%; padding: 0; float: left; overflow: hidden}
.loginLeft h2{  color: #002248; font-size: 24px; font-weight: 600; line-height: 110%; padding-bottom: 10px; margin-bottom: 10px;}
.loginLeft img{ width: 100%; height: 100%; object-fit: cover; margin-top: -100px;}
.loginRight{ width: 50%; padding: 5% 11% 0; float: right;}
.loginRight.signpage{ padding: 2% 11% 0;}
.loginRight h2{  color: #E0AA4B; font-size: 26px; font-weight: 600; margin: 0; padding-bottom: 0; text-align: center;}
.loginRight h4{  color: #E0AA4B; font-size: 20px; font-weight: 600; margin: 0; padding-bottom: 10px;}
.loginRight h5{  color: #E0AA4B; font-size: 18px; font-weight: 600; margin: 0; padding-bottom: 10px;}
.loginRight p{ text-align: center; color: #fff; margin: 25px 0 15px; font-size: 16px;}
.loginRight .form-control{ font-size: 16px; color: #9ABBE0; background: #345172; height: 50px; border: 0px; box-shadow: none;}
.loginRight .form-control::-webkit-input-placeholder { color: #9ABBE0;}
.loginRight .form-control:-moz-placeholder { color: #9ABBE0; opacity:  1;}
.loginRight .form-control::-moz-placeholder { color: #9ABBE0; opacity:  1;}
.loginRight .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */  color:    #9ABBE0;}
.loginRight .form-control::-ms-input-placeholder { /* Microsoft Edge */  color:    #9ABBE0;}
.font-size16{ font-size: 16px;}
.login-btn{ background: #E0AA4B; border-radius:5px; padding: 12px 20px; width: 100%; text-align: center; border: 0px; font-weight: 600;}
.login-btn:hover{ background: #cd9431;}
.sign-txt{ font-size:17px; color: #fff;}
.sign-txt a{ color: #E0AA4B; font-weight: 600;}
.loginRight input.file-input{ font-size: 16px; color: #9ABBE0; background: #345172; height: 50px; border: 0px; box-shadow: none; border-radius: 5px; width: 100%; padding: 0 0 5px 15px; line-height: 44px;}
.loginRight input[type=file]::file-selector-button { margin-left: 20px; border: none; background: #E0AA4B;   padding: 8px 20px; border-radius: 4px; color: #fff; cursor: pointer; transition: background .2s ease-in-out;
float: right; margin-top: 5px; line-height: 24px;}
.loginRight .form-check{ margin-bottom: 22px; font-size: 16px; color: #9ABBE0;}
.loginRight .form-check a{ color: #fff;}
.otpfrom{ width: 100%; margin-bottom: 20px;}
.otpfrom ul{ margin: 0px; padding: 0px; }
.otpfrom li{ display: inline-block; padding:0 5px ; width: 24%;}
.otpfrom li .form-control{ font-size: 30px; text-align: center; line-height: 50px; padding-top: 6px; color: #9ABBE0; background: #345172; height: 56px; border: 0px; box-shadow: none;}

#referPopup .modal-header { padding: 0.5rem 1rem;}
#referPopup .modal-title{ margin: 0px; padding: 0px; font-size: 20px;}



/*===================== MY WORKSHOP PAGE =======================*/
.workshophome{ width: 100%; position: relative;}
.workshophome .nav-tabs { margin-bottom: 25px;}
.workshophome .nav-tabs .nav-link{ font-size: 16px; color: #6B7383; font-weight: 600; border-radius: 0px; border: 0px; position: relative; padding: 15px 0; margin-right: 35px;}
.workshophome .nav-tabs .nav-item.show .nav-link, .workshophome .nav-tabs .nav-link.active { color: #E0AA4B;  background:none;  border-color: 0px;}
.workshophome .nav-tabs .nav-link i{ display:none ; width: 100%; left: 0; right: 0; bottom: 0; background:#E0AA4B; position: absolute; height: 3px;}
.workshophome .nav-tabs .nav-item.show .nav-link i, .workshophome .nav-tabs .nav-link.active i{ display: block;}
.workshophome .card{ border-radius: 10px; border: 0.394px solid var(--White, #FFF); background: linear-gradient(277deg, rgba(255, 255, 255, 0.70) 26.06%, rgba(255, 255, 255, 0.95) 77.72%); box-shadow: 0px 1.094px 21.315px -1.094px rgba(0, 0, 0, 0.04); backdrop-filter: blur(9.688861846923828px); padding:20px 15px 15px; position: relative; margin-bottom: 30px; min-height: 230px; display: block;}
.workshophome h2{ font-size: 16px; color: #002248; font-weight: 600; margin: 0 0 10px; padding: 0px;}
.workshophome p{ font-size: 13px; color: #626262; margin: 0 0 15px; padding: 0px;}
.workshophome img{ width: auto; height: 65px; margin-bottom: 20px;}
.workshophome .btn-blue{ margin: 0 3px;}
.workshophome .btn-blue:hover{ color: #fff;}
.workshophome .btn-yallow{ margin: 0 3px;}
.workdetail .card{ border-radius: 10px; border: 0.394px solid var(--White, #FFF); background: linear-gradient(277deg, rgba(255, 255, 255, 0.70) 26.06%, rgba(255, 255, 255, 0.95) 77.72%); box-shadow: 0px 1.094px 21.315px -1.094px rgba(0, 0, 0, 0.04); backdrop-filter: blur(9.688861846923828px); padding:15px; position: relative; margin-bottom: 30px; display: block;}
.workdetail .card h2 { color: #002248; font-size: 18px; font-weight: 700; line-height: 26px; padding-bottom: 10px;}
.workWrapDetail{ width: 100%; position: relative;}
.workWrapDetail .card{ border-radius: 10px; border: 0.394px solid var(--White, #FFF); background: linear-gradient(277deg, rgba(255, 255, 255, 0.70) 26.06%, rgba(255, 255, 255, 0.95) 77.72%); box-shadow: 0px 1.094px 21.315px -1.094px rgba(0, 0, 0, 0.04); backdrop-filter: blur(9.688861846923828px); padding:15px; position: relative; margin-bottom: 30px; display: block;}
.workWrapDetail .card h2 { color: #002248; font-size: 18px; font-weight: 700; line-height: 26px; padding-bottom: 10px;}
.rate-title{  background: url(../img/tabletrbg.png) center top no-repeat; background-size: cover; font-size: 14px; color: #002248; padding: 10px; margin-bottom: 20px;}
.starcomment{ margin-bottom: 20px;}
.starcomment .fa{ font-size: 22px; cursor: pointer; margin-right: 3px;}
.starcomment .fa:hover{ color: #E0AA4B;}
.form-control.comment{ height: 215px;}
.card.recordingbx{ height: 210px;}
.videoShow p{ padding: 0px; color: #002248; font-weight: 600;}
.card.recordingbx ul{ margin: 0px; padding: 0px;}
.card.recordingbx li{ list-style: none; background: #FAFBFB; border-radius: 5px; padding:25px 15px 15px; text-align: center; height: 140px; width: calc(25% - 16px); float: left; margin: 0 8px;}
.card.recordingbx li p{ padding: 15px 0 0; font-size: 16px; color: #002248;}
.card.sessionbx .overlay{ position: absolute; left: 0; top: 0; right:0; bottom: 0; z-index: 9; width: 100%; height: 100%; border-radius: 10px; background: rgba(0, 34, 72, 0.75);}
.card.sessionbx .overlay p{ padding-top: 35%; color: #fff; font-size: 18px; font-weight: 500;}


/* Digital Marketing */
.digitalpage .nav-tabs { margin-bottom: 25px;}
.digitalpage .nav-tabs .nav-link{ font-size: 16px; color: #6B7383; font-weight: 600; border-radius: 0px; border: 0px; position: relative; padding: 15px 0; margin-right: 20px;}
.digitalpage .nav-tabs .nav-item.show .nav-link, .digitalpage .nav-tabs .nav-link.active { color: #E0AA4B;  background:none;  border-color: 0px;}
.digitalpage .nav-tabs .nav-link i{ display:none ; width: 100%; left: 0; right: 0; bottom: 0; background:#E0AA4B; position: absolute; height: 3px;}
.digitalpage .nav-tabs .nav-item.show .nav-link i, .digitalpage .nav-tabs .nav-link.active i{ display: block;}
.digitalpage .card{ border-radius: 10px; border: 0.394px solid var(--White, #FFF); background: linear-gradient(277deg, rgba(255, 255, 255, 0.70) 26.06%, rgba(255, 255, 255, 0.95) 77.72%); box-shadow: 0px 1.094px 21.315px -1.094px rgba(0, 0, 0, 0.04); backdrop-filter: blur(9.688861846923828px); padding:20px 15px 15px; position: relative; margin-bottom: 30px; min-height: 230px; display: block;}
.digitalpage .card h2{ color: #002248; font-size: 18px; font-weight: 700; line-height: 26px; padding-bottom: 10px;}
.digitalpage .btn{ font-size: 12px; margin-right: 5px;}

/* Support Session Page */
.digitalpage.SupporSession .nav-tabs .nav-link{ margin-right: 55px;}
.digitalpage.SupporSession .first{ text-align: left;}
.digitalpage.SupporSession .btn-cancel{ background: #FC4755; color: #fff;}
.digitalpage.SupporSession .btn-cancel:hover{ background: #DC0C1C;}
.modalPopup .modal-header{ padding: 10px 15px;}
.modalPopup .modal-header img{ width: 25px; vertical-align: -5px; margin-right: 10px;}
.modalPopup h5.modal-title{ margin: 0; padding: 0px;}
.modalPopup .modal-body{ padding: 35px;}
.modalPopup .modal-body .form-group{ margin-bottom: 25px;}
.modalPopup .modal-body .form-control.message{ height: 130px;}
.modalPopup .modal-body .btn{ padding: 12px 15px; border-radius: 10px;}
.cancelModal { padding:55px 55px 30px}
.cancelModal p{ font-size: 22px; color: #626262; line-height: 34px; margin:25px 0 15px;}
.cancelModal .btn{ padding: 9px 35px; width: 150px; margin: 0 10px; border-radius: 5px !important;}

/* Student Details */
.studentCard{ background: var(--New-Card, linear-gradient(277deg, rgba(255, 255, 255, 0.70) 26.06%, rgba(255, 255, 255, 0.95) 77.72%));box-shadow: 0px 1.094px 21.315px -1.094px rgba(0, 0, 0, 0.04); border-radius: 10px;  margin-bottom: 25px;}
.student-header{ border-radius: 10px 10px 0 0; background: #002248; height: 105px; position: relative; overflow: hidden;}
.student-header .premium-tag{ position: absolute; top: 10px; right:10px; width: 100px; z-index: 9; color: #ffcb49; font-size: 14px; font-weight: 600; text-transform: uppercase;}
.student-header .premium-tag img{ vertical-align: -2px; margin-right: 3px;}
.student-header:before{ right: 130px; width: 100px; height: 50px; position: absolute; top: 60px; content: ''; z-index: 0; background: rgb(10 60 116 / 70%); border-radius: 7px 7px 0 0;}
.student-header:after{ right: 50px; width: 110px; height: 80px; position: absolute; top: 45px; content: ''; z-index: 0; background: rgb(224 170 75 / 70%); border-radius: 7px 7px 0 0;}
.student-body{ padding:65px 15px 15px; position: relative;}
.s-profile{ position: absolute; left: 20px; top: -55px; width: 110px; height: 110px; border-radius: 50%; border: 6px solid #fff; overflow: hidden;}
.s-profile img{ width: 100%; height: 100%; object-fit: fill;}
.student-body li{ list-style: none; padding: 10px 0 10px 38px; position: relative; font-size: 16px;}
.student-body li img{ position: absolute; left: 2px; top: 11px; width: 22px; height: auto;}
.course-sutent-show{ padding: 15px 0 5px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; margin: 10px 0}
.course-sutent-show p{ padding-bottom: 14px;}
.course-sutent-show p span{ display: inline-block; width: 40%;}
.course-sutent-show div span{   text-transform: capitalize;  font-size: 14px; cursor: pointer; }
.course-sutent-show div span.active{ font-weight: bold; }
.student__card{ background: var(--New-Card, linear-gradient(277deg, rgba(255, 255, 255, 0.70) 26.06%, rgba(255, 255, 255, 0.95) 77.72%));box-shadow: 0px 1.094px 21.315px -1.094px rgba(0, 0, 0, 0.04); border-radius: 10px;  margin-bottom: 25px; padding: 15px;}
.student__card h3{
	color: var(--Primary, #002248);
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	margin-bottom: 15px;
}
.circular-chart.yallow .circle { stroke: #E0AA4B;}
.circular-chart.yallow .percentage{ fill: #E0AA4B;}
.changelog .btn{ border-radius: 7px;}
.studentProfile .card {
    border-radius: 10px;
    border: 0.394px solid var(--White, #FFF);
    background: linear-gradient(277deg, rgba(255, 255, 255, 0.70) 26.06%, rgba(255, 255, 255, 0.95) 77.72%);
    box-shadow: 0px 1.094px 21.315px -1.094px rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(9.688861846923828px);
    padding: 13px;
    position: relative;
    margin-bottom: 30px;
    min-height: 230px;
    display: block;
}
.studentProfile .card h3{
	color: var(--Primary, #002248);
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	padding: 0;
	margin-bottom: 13px;
}
.studentProfile .card h3 a{ float: right; border-radius: 5px; background: #E0AA4B; padding: 7px 10px; display: inline-block; color: #fff; font-size: 12px;}
.card.certibx{ min-height: 225px; padding-top: 35px;}
.card.certibx p{ margin: 15px 0; padding: 0;}
.course-sutent-show label{ font-size: 14px;}
.course-sutent-show .form-control{ border-radius: 5px; height: 42px; font-size: 15px;}
.mstudentpad .form-control{ border-radius: 5px; height: 42px; font-size: 15px;}
.mstudentpad .form-control.notes{ height: 150px;}
img.close-remove{ width: 18px; height: 18px; vertical-align: -4px; margin-left: 15px;}

.viewrequest ul{ margin: 0; padding: 0;}
.viewrequest li{ margin-bottom: 25px; font-size: 16px; line-height: 160%; list-style: none;}
.viewrequest li span{ display: block; font-size: 14px; font-weight: 600; color: #000; margin-bottom: 5px; line-height: 14px}
.text-left{ text-align: left !important;}
.form {
  clear: both
}
.form--disabled input, .form--disabled textarea, .form--disabled select {
	padding: 5px 10px;
	border: 1px solid #ccc;
}
.form--disabled input, .form--disabled textarea, .form--disabled select {
    padding-left: 0;
    border: 0 solid #efefef;
    background: white;
    height: auto;
    color: #31373b;
    font-size: 16px;
    transition: all 0.2s ease-in-out;
}
.form .form-control:disabled, .form .form-control[readonly] { background: none;}
.form .form-control {
    border-radius: 5px;
    height: 34px;
    font-size: 13px;
}
.form select.form-control {
    background: #fff url("../img/down.svg") 95% 14px no-repeat;
    background-size: 10px;
}
.form.form--disabled .form-control { background: none;}

.modalPopup .modal-body.viewCertificate {
	padding: 25px 15px;
}
.viewCertificate ul{
	padding: 0;
	margin: 0;
	text-align: center;
}
.viewCertificate li{
	display: inline-block;
	width: 30%; text-align: center;
	background: rgb(242 242 242 / 30%);
	border-radius: 5px;
	padding: 20px 10px;
	list-style: none;
	margin: 10px 6px;
}
.viewCertificate li span{
	display: block;
	font-size: 13px;
	margin: 15px 0 0;
}
.addFile{
	padding:29px 0 0;
}
.addFile a{
	width: 48px;
	height: 48px;
	border-radius: 7px;
	background: #000;
	color: #fff;
	text-align: center;
	line-height: 48px;
	display: block;
}
.formbold-main-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
  }

  .formbold-form-wrapper {
    margin: 0 auto;
    max-width: 550px;
    width: 100%;
    background: white;
  }
  .formbold-form-label {
    display: block;
    font-weight: 500;
    font-size: 16px;
    color: #07074d;
    margin-bottom: 12px;
  }
  .formbold-form-label-2 {
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 20px;
  }

  .formbold-form-input {
    width: 100%;
    padding: 12px 24px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    background: white;
    font-weight: 500;
    font-size: 16px;
    color: #6b7280;
    outline: none;
    resize: none;
  }
  .formbold-form-input:focus {
    border-color: #6a64f1;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
  }

  .formbold-btn {
    text-align: center;
    font-size: 16px;
    border-radius: 6px;
    padding: 14px 32px;
    border: none;
    font-weight: 600;
    background-color: #6a64f1;
    color: white;
    cursor: pointer;
  }
  .formbold-btn:hover {
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
  }

  .formbold--mx-3 {
    margin-left: -12px;
    margin-right: -12px;
  }
  .formbold-px-3 {
    padding-left: 12px;
    padding-right: 12px;
  }
  .flex {
    display: flex;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .w-full {
    width: 100%;
  }

  .formbold-file-input input {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
  }

 .formbold-file-input label {
    position: relative;
    border: 1px dashed #e0e0e0;
    border-radius: 6px;
    min-height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 50px;
    text-align: center;
}
  .formbold-drop-file {
    display: block;
    font-weight: 600;
    color: #07074d;
    font-size: 16px;
    margin-bottom:5px;
  }

  .formbold-or {
    font-weight: 500;
    font-size: 14px;
    color: #6b7280;
    display: block;
    margin-bottom: 5px;
  }
  .formbold-browse {
    font-weight: 500;
    font-size: 16px;
    color: #07074d;
    display: inline-block;
    padding: 8px 28px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
  }

  .formbold-file-list {
    border-radius: 6px;
    background: #f5f7fb;
    padding: 16px 32px;
  }

  .formbold-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .formbold-file-item button {
    color: #07074d;
    border: none;
    background: transparent;
    cursor: pointer;
  }

  .formbold-file-name {
    font-weight: 500;
    font-size: 16px;
    color: #07074d;
    padding-right: 12px;
  }
  .formbold-progress-bar {
    margin-top: 20px;
    position: relative;
    width: 100%;
    height: 6px;
    border-radius: 8px;
    background: #e2e5ef;
  }

  .formbold-progress {
    position: absolute;
    width: 75%;
    height: 100%;
    left: 0;
    top: 0;
    background: #002248;
    border-radius: 8px;
  }

  @media (min-width: 540px) {
    .sm\:w-half {
      width: 50%;
    }
  }

/* Trainer Profile */
.TrainerCard{ background: var(--New-Card, linear-gradient(277deg, rgba(255, 255, 255, 0.70) 26.06%, rgba(255, 255, 255, 0.95) 77.72%)); box-shadow: 0px 1.094px 21.315px -1.094px rgba(0, 0, 0, 0.04); border-radius: 10px;  margin-bottom: 25px;}
.TrainerCard .student-header{ border-radius: 10px 10px 0 0; background: #E0AA4B; height: 105px; position: relative; overflow: hidden;}
.TrainerCard .student-header .premium-tag{ position: absolute; top: 10px; right:10px; width: 100px; z-index: 9; color: #ffcb49; font-size: 14px; font-weight: 600; text-transform: uppercase;}
.TrainerCard .student-header .premium-tag img{ vertical-align: -2px; margin-right: 3px;}
.TrainerCard .student-header:before{ right: 130px; width: 100px; height: 50px; position: absolute; top: 60px; content: ''; z-index: 0;border-radius: 5px 5px 0px 0px; background: rgba(0, 34, 72, 0.20);}
.TrainerCard .student-header:after{ right: 30px; width: 130px; height: 80px; position: absolute; top: 45px; content: ''; z-index: 0; border-radius: 5px 5px 0px 0px; background: rgba(10, 60, 116, 0.30);}
.TrainerCard .student-body{ padding:65px 15px 15px; position: relative;}
.TrainerCard .s-profile{ position: absolute; left: 20px; top: -55px; width: 110px; height: 110px; border-radius: 50%; border: 6px solid #fff; overflow: hidden;}
.TrainerCard .s-profile img{ width: 100%; height: 100%; object-fit: fill;}
.TrainerCard .student-body li{ list-style: none; padding: 10px 0 10px 38px; position: relative; font-size: 16px;}
.TrainerCard .student-body li img{ position: absolute; left: 2px; top: 11px; width: 22px; height: auto;}
.TrainerProfile .cardView{ background: var(--New-Card, linear-gradient(277deg, rgba(255, 255, 255, 0.70) 26.06%, rgba(255, 255, 255, 0.95) 77.72%)); box-shadow: 0px 1.094px 21.315px -1.094px rgba(0, 0, 0, 0.04);    border-radius: 10px;  margin-bottom: 25px;  padding: 15px;}
.TrainerProfile .cardView h4{ color: var(--Default, #E0AA4B); text-align: center; font-family: "Open Sans";
font-size: 60px; font-style: normal; font-weight: 700;line-height: 70px; /* 116.667% */ margin: 15px 0 5px;}
.TrainerProfile .cardView p{color: var(--Light, #626262); text-align: center; font-size: 16px; font-style: normal; font-weight: 400;line-height: 22px; /* 137.5% */}
.TrainerProfile select.form-control{ border-radius: 3px; border: 1px solid #EFEFEF; height: 40px; font-size: 14px; background: #fff url("../img/down.svg") 94% 17px no-repeat; background-size: 11px;}
.cardView.unmessage{ padding-top:54px;}
.TrainerProfile .card { border-radius: 10px; border: 0.394px solid var(--White, #FFF); background: linear-gradient(277deg, rgba(255, 255, 255, 0.70) 26.06%, rgba(255, 255, 255, 0.95) 77.72%); box-shadow: 0px 1.094px 21.315px -1.094px rgba(0, 0, 0, 0.04); backdrop-filter: blur(9.688861846923828px); padding: 13px; position: relative; margin-bottom: 30px; min-height: 230px; display: block;}
.TrainerProfile .card h3{ color: var(--Primary, #002248); font-size: 18px; font-style: normal; font-weight: 600; line-height: normal; padding: 0; margin-bottom: 15px;}

.ChatTrainer{ background: #fff; border-radius: 10px; border: 0.394px solid var(--White, #FFF); background: linear-gradient(277deg, rgba(255, 255, 255, 0.70) 26.06%, rgba(255, 255, 255, 0.95) 77.72%); box-shadow: 0px 1.094px 21.315px -1.094px rgba(0, 0, 0, 0.04); backdrop-filter: blur(9.688861846923828px); padding: 0; position: relative; margin-bottom: 30px; overflow: hidden;}
.ChatTrainer h3{ color: var(--Primary, #002248); font-size: 18px; font-style: normal; font-weight: 600; line-height: normal; padding: 13px 15px; margin-bottom: 15px; border-bottom: 1px solid #eee; margin: 0;}
.trainercolLeft{ width: 290px; float: left; height: 360px; overflow-y: scroll; scrollbar-width: thin; scrollbar-color: #002248 #E2ECF7;}
.trainercolLeft::-webkit-scrollbar {  width: 10px;}
.trainercolLeft::-webkit-scrollbar-track { background: #E2ECF7;}
.trainercolLeft::-webkit-scrollbar-thumb { background-color: #002248; border-radius: 5px; border: 3px solid #E2ECF7;}
.trainercolLeft ul { margin: 0px; padding: 0;}
.trainercolLeft ul li{ border-bottom: 1px solid rgba(214, 209, 209, 0.50); padding:15px 10px 10px 65px; list-style: none; position: relative; height: 70px; cursor: pointer;}
.trainercolLeft ul li:hover, .trainercolLeft ul li.active{ background: #FFF4E0;}
.trainercolLeft ul li img{ position: absolute; left: 10px; top: 16px; width: 40px; height: 40px; border-radius: 3px;}
.trainercolLeft ul li h4{ color: var(--Primary, #002248); font-size: 15px; font-style: normal; font-weight: 500; line-height: 16px; margin: 0px; padding: 0 0 3px;}
.trainercolLeft ul li h4 span{ float: right; font-size: 11px; color: #626262;}
.trainercolLeft ul li p{ font-size: 13px; color: #626262; padding: 0px;}


.chatTainer{ width: calc(100% - 290px); float: left;}
.chatTainbody{ height: 282px; overflow-y: hidden; padding: 10px;}
.chatTainbody::-webkit-scrollbar {  width: 10px;}
.chatTainbody::-webkit-scrollbar-track { background: #E2ECF7;}
.chatTainbody::-webkit-scrollbar-thumb { background-color: #002248; border-radius: 5px; border: 3px solid #E2ECF7;}

.chatUserSide{ width: 100%; margin-bottom: 10px; position: relative;}
.chatUserSide .user01{ width: 100%; text-align: right; padding: 0 52px 6px 0;}
.chatUserSide .user01 span{ display: inline-block; background: #002248; color: #fff; font-size: 16px; border-radius: 12px; padding: 8px 15px;}

.chatUserSide .userMe{ width: 100%; text-align: left; padding: 0 0 6px 52px;}
.chatUserSide img{ position: absolute; left: 0; top: 0; width: 40px; border-radius: 12px;}
.chatUserSide span.user01-profile img{ position: absolute; left: auto; right: 0 !important; top: 0; width: 40px; border-radius: 12px;}
.chatUserSide .userMe span{ display: inline-block; background: #F1F1F1; color: #000000; font-size: 16px; border-radius: 12px; padding: 8px 15px;}


.chatTainfooter{ position: relative; padding: 15px 15px 15px 54px; background: #FFF9ED;}
.chatTainfooter .form-control{ border-radius: 8px; border: 2px solid var(--gray-gray-300, #E2E8F0);
background: var(--White, #FFF); padding-right: 52px; height: 55px;}
.chatTainfooter a{ position: absolute; left: 12px; top: 30px; width: 28px;}
.chatTainfooter a img { width: 28px; height: 28px;}
.chatTainfooter button{ position: absolute; right: 30px; top: 30px; border: 0; background: #fff;}

.TrainerProfile .card .activitywb ul{ margin: 0px; padding: 0px;}
.TrainerProfile .card .activitywb li{ margin-bottom: 10px; color: #626262; font-size: 16px; list-style: none; position: relative; padding: 10px 10px 10px 70px; height: 90px; border-bottom: 1px solid #eee;}
.TrainerProfile .card .activitywb li strong{ color: #002248; font-weight: 700;}
.TrainerProfile .card .bdr-noti{ border-radius: 3px; border: 1px solid #ccc; display: inline-block; padding: 0 5px}
.TrainerProfile .card .date{ display: block;}
.TrainerProfile .card .profileview{ position: absolute; left: 0; top: 8px;}
.TrainerProfile .card .couresbx.card-body ul{ margin: 0px; padding: 0px;}
.TrainerProfile .card .couresbx.card-body li{ margin-bottom: 10px; border-radius: 6px; background: #E6F5FA; padding: 12px; color: #002248; font-size: 16px; font-weight: 600; list-style: none;}
.TrainerProfile .card .couresbx.card-body li:nth-child( even ){ background: #FFEEE2;}
.TrainerProfile .card .couresbx.card-body li span{ position: inherit; left: inherit; top: inherit; margin-right: 10px; display: inline-block;}
.TrainerProfile .card .couresbx.card-body li span img{ width: 22px; height: auto;}

.TrainerProfile .card span.topview{ position: absolute; right: 20px; top: 22px;}
.TrainerProfile .card span.topview img{ width: 55px; height: auto;}
.TrainerProfile .card .couresbx.card-body{ overflow-y: scroll; height: 320px; padding-right: 10px !important;}
.TrainerProfile .card .activitywb.card-body{ overflow-y: scroll; height: 320px; padding-right: 10px !important;}
.TrainerProfile .card .chatlist.card-body{ overflow-y: scroll; height: 320px; padding-right: 10px !important;}
.TrainerProfile .card .sessionbx.card{ height: 320px;}



.schedulestudentwrap .card { border-radius: 10px;  border: 0.394px solid var(--White, #FFF); background: linear-gradient(277deg, rgba(255, 255, 255, 0.70) 26.06%, rgba(255, 255, 255, 0.95) 77.72%); box-shadow: 0px 1.094px 21.315px -1.094px rgba(0, 0, 0, 0.04); backdrop-filter: blur(9.688861846923828px); padding: 20px 15px 15px; position: relative; margin-bottom: 30px;min-height: 230px; display: block;}
.schedulestudentwrap .card h2{ color: #002248; font-size: 18px; font-weight: 700; line-height: 26px; padding-bottom: 10px;}
.schedulestudentwrap .card h3{ color: #002248; font-size: 18px; font-weight: 700; line-height: 26px; padding-bottom: 10px;  border-bottom: 1px solid #eee;}
.schedulestudentwrap .card.filesdata h2{ border-bottom: 1px solid #eee;}
.schedulestudentwrap .card.filesdata h2 img{ vertical-align: -1px;}
.schedulestudentwrap .btn.start{ padding: 9px 10px;}
.schedulestudentwrap .card.filesdata tr td img{ width: 24px; height: auto; margin-right: 10px;}






.videoRecording{ padding: 15px 0 0;}
.videob{ width: 100%; margin-bottom: 25px;}
.videob img{ width: 100%; height: auto;}

/* Schedule Page */
.schedulewrap { border-radius: 10px;  border: 0.394px solid var(--White, #FFF); background: linear-gradient(277deg, rgba(255, 255, 255, 0.70) 26.06%, rgba(255, 255, 255, 0.95) 77.72%); box-shadow: 0px 1.094px 21.315px -1.094px rgba(0, 0, 0, 0.04); backdrop-filter: blur(9.688861846923828px); padding: 20px 15px 15px; position: relative; margin-bottom: 30px; min-height: 230px; display: block;}

#calendar { width: 100%; margin: 0 auto;}
#calendar h2{ font-size: 20px; padding: 8px 0 0;}
#calendar .fc-state-default { border-radius: 20px; border: 2px solid var(--Grey-Blue-97, #F5F6F7); background: var(--White, #FFF); box-shadow: 0px 2px 5px 0px rgba(38, 51, 77, 0.03); font-size: 14px; margin: 0 8px; padding: 8px 15px; height: auto; color: #6B7A99; text-transform: capitalize;}
.fc th, .fc td { font-size: 16px; color: #6B7A99;}
.fc th { padding: 6px 5px; color: #ADB8CC; font-weight: 400;}
.fc-event{ border: 2px solid var(--Green, #29CC39); background: var(--green-5, rgba(41, 204, 57, 0.05)); color: var(--Grey-Blue-50, #4D5E80);}
#calendar .fc-state-default:hover { background: #E0AA4B; text-shadow: inherit; color: #fff;}
.fc-day-grid-event > .fc-content { padding: 5px 0; text-align: center;}
.fc-event, .fc-event:hover, .ui-widget .fc-event { color: #4D5E80; }
img.userPro{ width: 30px; height: auto; margin-right: 5px;}
.pulse2 {
	-webkit-animation: pulse 400ms infinite alternate;
	        animation: pulse 400ms infinite alternate;
	background: #3EBE42;
	width: 12px;
	height: 12px;
	border: 0px; border-radius: 50%;
}
@-webkit-keyframes pulse {
	0% { background-color: #3EBE42; }
	100% { background-color: #27E22D; }
}
@keyframes pulse {
	0% { background-color: #3EBE42; }
	100% { background-color: #27E22D; }
}
.event__header{ margin-bottom: 20px;}
.event__header button{ border-radius: 20px; border: 2px solid var(--Grey-Blue-97, #F5F6F7); background: var(--White, #FFF); box-shadow: 0px 2px 5px 0px rgba(38, 51, 77, 0.03); color: var(--Grey-Blue-60, #6B7A99);
text-align: center; font-feature-settings: 'clig' off, 'liga' off; font-size: 12px; font-style: normal; font-weight: 900; line-height: 20px; padding: 8px 15px 7px;}
.event__header button:hover{ background: #002248; color: #fff;}
.date__event{ text-align: center;}
.date__event span{ display: inline-block; margin: 0 20px; vertical-align: middle; padding-top: 5px; color: var(--Grey-Blue-60, #6B7A99); font-feature-settings: 'clig' off, 'liga' off; font-size: 14px; font-style: normal; font-weight: 700; line-height: 20px; /* 166.667% */}
.eventTime{ width: 65px; float: left;}
.eventTime .common-time{ display:grid; grid-gap:0;}
.eventTime .common-list-item{ background:#fff; color:#ADB8CC; font-size:14px; height:80px; text-align:center; line-height: 80px; border: 1px solid rgb(243 243 243 / 58%);  box-sizing: border-box;}
.eventCalendar{ width: calc(100% - 65px); float: right;}
.eventCalendar .common-list{ display:grid; grid-template-columns:repeat(7, 1fr); grid-gap:0;}
.eventCalendar .common-list-item{ background:#fff; height:80px; border: 1px solid #ddd;  box-sizing: border-box;}
.common-list .common-list-item.weekname{ color:#ADB8CC; font-size:14px; line-height: 80px; text-align: center;}
.stars__green{ border: 3px solid #29CC39; background: rgb(41 204 57 / 8%); padding: 5px; border-radius: 8px; text-align: left;height: 72px; position: relative; cursor: pointer;}
.stars__green h4, .stars__green h4, .stars__green h4{color: var(--Grey-Blue-50, #4D5E80); font-feature-settings: 'clig' off, 'liga' off;
font-size: 11px; font-style: normal; font-weight: 700;line-height: 16px; /* 200% */ }
.time_sheet{ margin-bottom: 3px;}
.time_sheet span{ border-radius: 2px; background: var(--Green, #29CC39); color: var(--White, var(--White, #FFF)); text-align: center; font-feature-settings: 'clig' off, 'liga' off; /* Black 8 */ font-size: 8.5px; font-style: normal; font-weight: 900; line-height: 20px; /* 250% */ padding: 3px 6px;}
.student_photo{ position: absolute; right: 5px; top: 5px; width: 20px;}
.student_photo img{ width: 20px; height: auto; margin-bottom: 3px; border-radius: 3px;}
.student_photo span{ display: inline-block; border-radius: 3px; margin-left: 3px; background: #E0AA4B; color: #000; text-align: center; line-height: 20px; width: 20px; height: 20px; font-size: 10px;}
.stars__orange{ border: 3px solid #FF6633; background: rgb(255 102 51 / 8%);}
.stars__orange .time_sheet span { background:#FF6633; }
.stars__yallow{ border: 3px solid #FFCB33; background: rgba(255, 203, 51, 0.05);}
.stars__yallow .time_sheet span { background:#FFCB33; }
.stars__purple{ border: 3px solid #83F; background: rgba(136, 51, 255, 0.05);}
.stars__purple .time_sheet span { background:#83F; }
.stars__blue{ border: 3px solid #33BFFF; background: rgba(51, 191, 255, 0.05);}
.stars__blue .time_sheet span { background:#33BFFF; }
.stars__red{ border: 3px solid #E62E7B; background: var(--pink-5, rgba(230, 46, 123, 0.05));}
.stars__red .time_sheet span { background:#E62E7B; }
.stars__bronze{ border: 3px solid #CC7429; background: var(--yellow-5, rgba(255, 203, 51, 0.05));}
.stars__bronze .time_sheet span { background:#CC7429; }
.stars__tiffany{ border: 3px solid #2EE6CA; background: var(--tiffany-5, rgba(46, 230, 202, 0.05));}
.stars__tiffany .time_sheet span { background:#2EE6CA; }

.event__card{ width: 100%;}
.event__card .nav-tabs { border: 0px; justify-content: right;}
.event__card li{ margin-left: 10px;}
.event__card .nav-tabs .nav-link{ border-radius: 20px !important; border: 2px solid var(--Grey-Blue-97, #F5F6F7); background: var(--White, #FFF); box-shadow: 0px 2px 5px 0px rgba(38, 51, 77, 0.03); color: var(--Grey-Blue-60, #6B7A99); text-align: center; font-feature-settings: 'clig' off, 'liga' off; font-size: 12px; font-style: normal; font-weight: 900; line-height: 20px; padding: 8.5px 20px; display: inline-block;}
.event__card .nav-tabs .nav-item.show .nav-link, .event__card .nav-tabs .nav-link.active{ background: #002248; color: #fff;}
.eventMonth{ width: calc(100% - 65px); float: right;}
.eventMonth .common-list{ display:grid; grid-template-columns:repeat(7, 1fr); grid-gap:0;}
.eventMonth .common-list-item{ background:#fff; height:80px; border: 1px solid #ddd;  box-sizing: border-box;}
.dayCalendar { width: calc(100% - 65px); float: right;}
.dayCalendar .common-list{ display:grid; grid-template-columns:repeat(1, 1fr); grid-gap:0;}
.dayCalendar .common-list-item{ background:#fff; height:80px; border: 1px solid #ddd;  box-sizing: border-box;}
.modalPopup .modal-body a.btn { padding: 6px 15px; border-radius: 4px;}



/* *******************************
message-area
******************************** */
.chat__wrap{ width: 100%; position: relative;}
.message-area {
    height: 100vh;
    overflow: hidden;
    padding: 30px 0;
    background: #f5f5f5;
}
.chat-area {
    position: relative;
    width: 100%;
    background-color: #fff;
    border-radius: 0.3rem;
    height: 90vh;
    overflow: hidden;
    min-height: calc(100% - 1rem);
}

.chatlist {
    outline: 0;
    height: 100%;
    overflow: hidden;
    width: 300px;
    float: left;
    padding: 0;
}

.chat-area .modal-content {
    border: none;
    border-radius: 0;
    outline: 0;
    height: 100%;
}

.chat-area .modal-dialog-scrollable {
    height: 100% !important;
}

.chatbox {
    width: auto;
    overflow: hidden;
    height: 100%;
    border-left: 1px solid #ccc;
}

.chatbox .modal-dialog,
.chatlist .modal-dialog {
    max-width: 100%;
    margin: 0;
}

.msg-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-area .form-control {
    display: block;
    width: 80%;
    padding: 0.375rem 0.75rem;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #222;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ccc;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.chat-area .form-control:focus {
    outline: 0;
    box-shadow: inherit;
}

a.add img {
    height: 36px;
}

.chat-area .nav-tabs {
    border-bottom: 1px solid #dee2e6;
    align-items: center;
    justify-content: space-between;
    flex-wrap: inherit;
}

.chat-area .nav-tabs .nav-item {
    width: 100%;
}

.chat-area .nav-tabs .nav-link {
    width: 100%;
    color: #180660;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    text-transform: capitalize;
    margin-top: 5px;
    margin-bottom: -1px;
    background: 0 0;
    border: 1px solid transparent;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}

.chat-area .nav-tabs .nav-item.show .nav-link,
.chat-area .nav-tabs .nav-link.active {
    color: #222;
    background-color: #fff;
    border-color: transparent transparent #000;
}

.chat-area .nav-tabs .nav-link:focus,
.chat-area .nav-tabs .nav-link:hover {
    border-color: transparent transparent #000;
    isolation: isolate;
}

.chat-list h3 {
    color: #222;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-transform: capitalize;
    margin-bottom: 0;
	padding: 0px;
}

.chat-list p {
    color: #343434;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    text-transform: capitalize;
    margin-bottom: 0;
    padding: 3px 0 0;
}

.chat-list a.d-flex {
    margin: 0;
    position: relative;
    text-decoration: none;
	padding: 15px 15px;
	border-bottom: 1px solid #ddd;
}
.chat-list a:hover.d-flex, .chat-list a.d-flex.show{
	background: #FFF4E0;
}
.chat-list .active {
    display: block;
    content: '';
    clear: both;
    position: absolute;
    bottom: auto;
    left: 50px;
    height: 12px;
    width: 12px;
    background: #00DB75;
    border-radius: 50%;
    border: 2px solid #fff;
    top: 19px;
}

.msg-head h3 {
    color: #222;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 0;
	padding: 0;
}

.msg-head p {
    color: #343434;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    text-transform: capitalize;
    margin-bottom: 0;
	padding: 0;
}

.msg-head {
    padding: 15px;
    border-bottom: 1px solid #ccc;
}

.moreoption {
    display: flex;
    align-items: center;
    justify-content: end;
}

.moreoption .navbar {
    padding: 0;
}

.moreoption li .nav-link {
    color: #222;
    font-size: 16px;
}

.moreoption .dropdown-toggle::after {
    display: none;
}

.moreoption .dropdown-menu[data-bs-popper] {
    top: 100%;
    left: auto;
    right: 0;
    margin-top: 0.125rem;
}

.msg-body ul {
    overflow: hidden;
}

.msg-body ul li {
    list-style: none;
    margin: 15px 0;
}

.msg-body ul li.sender {
    display: block;
    width: 100%;
    position: relative;
}

.msg-body ul li.sender:before {
    display: block;
    clear: both;
    content: '';
    position: absolute;
    top: -6px;
    left: -7px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 12px 15px 12px;
    border-color: transparent transparent #f5f5f5 transparent;
    -webkit-transform: rotate(-37deg);
    -ms-transform: rotate(-37deg);
    transform: rotate(-37deg);
}

.msg-body ul li.sender p {
    color: #000;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
    padding: 15px;
    background: #f5f5f5;
    display: inline-block;
    border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-bottom: 0;
}

.msg-body ul li.sender p b {
    display: block;
    color: #180660;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
}

.msg-body ul li.repaly {
    display: block;
    width: 100%;
    text-align: right;
    position: relative;
}

.msg-body ul li.repaly:before {
    display: block;
    clear: both;
    content: '';
    position: absolute;
    bottom: 15px;
    right: -7px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 12px 15px 12px;
    border-color: transparent transparent #002248 transparent;
    -webkit-transform: rotate(37deg);
    -ms-transform: rotate(37deg);
    transform: rotate(37deg);
}

.msg-body ul li.repaly p {
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
    padding: 15px;
    background: #002248;
    display: inline-block;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    margin-bottom: 0;
}

.msg-body ul li.repaly p b {
    display: block;
    color: #002248;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
}

.msg-body ul li.repaly:after {
    display: block;
    content: '';
    clear: both;
}

.time {
    display: block;
    color: #000;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 400;
}

li.repaly .time {
    margin-right: 20px;
}

.divider {
    position: relative;
    z-index: 1;
    text-align: center;
}

.msg-body h6 {
    text-align: center;
    font-weight: normal;
    font-size: 14px;
    line-height: 1.5;
    color: #222;
    background: #fff;
    display: inline-block;
    padding: 0 5px;
    margin-bottom: 0;
}

.divider:after {
    display: block;
    content: '';
    clear: both;
    position: absolute;
    top: 12px;
    left: 0;
    border-top: 1px solid #EBEBEB;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.send-box {
    padding: 15px;
    border-top: 1px solid #ccc;
}

.send-box form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.send-box .form-control {
    display: block;
    width: 85%;
    padding: 0.375rem 0.75rem;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #222;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ccc;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.send-box button {
    border: none;
    background: #002248;
    padding: 13px 5px;
    color: #fff;
    border-radius: 0.25rem;
    font-size: 14px;
    font-weight: 400;
    width: 15%;
    margin-left: 1%;
}

.send-box button i {
    margin-right: 5px;
}

.send-btns .button-wrapper {
    position: relative;
    width: 125px;
    height: auto;
    text-align: left;
    margin: 0 auto;
    display: block;
    background: #F6F7FA;
    border-radius: 3px;
    padding: 5px 15px;
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
    overflow: hidden;
}

.send-btns .button-wrapper span.label {
    position: relative;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    cursor: pointer;
    color: #343945;
    font-weight: 400;
    text-transform: capitalize;
    font-size: 13px;
}

#upload {
    display: inline-block;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

.send-btns .attach .form-control {
    display: inline-block;
    width: 120px;
    height: auto;
    padding: 5px 8px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: #343945;
    background-color: #F6F7FA;
    background-clip: padding-box;
    border: 1px solid #F6F7FA;
    border-radius: 3px;
    margin-bottom: 5px;
}

.send-btns .button-wrapper span.label img {
    margin-right: 5px;
}

.button-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    text-align: center;
    margin: 0 auto;
}

button:focus {
    outline: 0;
}

.add-apoint {
    display: inline-block;
    margin-left: 5px;
}

.add-apoint a {
    text-decoration: none;
    background: #F6F7FA;
    border-radius: 8px;
    padding: 8px 8px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
    color: #343945;
}

.add-apoint a svg {
    margin-right: 5px;
}

.chat-icon {
    display: none;
}

.closess i {
    display: none;
}
.chat__wrap .modal-dialog-scrollable .modal-body::-webkit-scrollbar {  width: 10px;}
.chat__wrap .modal-dialog-scrollable .modal-body::-webkit-scrollbar-track { background: #E2ECF7;}
.chat__wrap .modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb { background-color: #002248; border-radius: 5px; border: 3px solid #E2ECF7;}
.chat__wrap .chat-header{ padding: 10px;}
.chat__wrap .chatlist .modal-body{ padding: 0;}


.join__video{ width: 100%; padding: 20px !important;}

.join__video li{ width: calc(50% - 20px); float: left; padding: 10px 10px 15px; box-shadow: 0px 2px 15px 0px rgba(99, 229, 212, 0.20); background: #fff; border-radius: 10px; margin: 0 10px;}
.join__video li p { margin:0; padding: 0 0 15px; color: #002248; display: block;}
.join__video li a.btn { color: #fff; display: inline-block; margin-top: 5px; padding: 9px 25px; width: 100%;}
.join__video li img{ width: 100%; margin: 0 auto;}



/* Day Event */
.day__event{ width: 13.50%; float: left; position: relative;}
.day__event li{ width: 100%; height: 80px; border: 1px solid rgb(243 243 243 / 58%); box-sizing: border-box; padding: 4px;}
.day__event li .h80{ height: 72px;}
.day__event li .h152{ height: 152px;}
.weekname { color: #ADB8CC; font-size: 14px; line-height: 80px; text-align: center;}
.student_photo.h152{ width: 100%; right: auto; top: 80%; left: 5px; vertical-align: 3px !important;}
.student_photo.h152 span{ vertical-align: 3px;}

.day__event li .h216{ height: 232px;}
.student_photo.h216{ width: 100%; right: auto; top: 85%; left: 5px; vertical-align: 3px !important;}
.student_photo.h216 span{ vertical-align: 3px;}

.current__time{ height: 2px; width: 100%; position: absolute; left: 0; right: 0; z-index: 99; background: #F63;}
.current__time:before{ position: absolute; left: -6px; top: -6px; content: ''; background: #F63; display: block; border-radius: 50%; width: 12px; height: 12px;}
.current__time:after{ position: absolute; right: -6px; top: -6px; content: ''; background: #F63; display: block; border-radius: 50%; width: 12px; height: 12px;}


.TopicList .card { border-radius: 10px; border: 0.394px solid var(--White, #FFF); background: linear-gradient(277deg, rgba(255, 255, 255, 0.70) 26.06%, rgba(255, 255, 255, 0.95) 77.72%); box-shadow: 0px 1.094px 21.315px -1.094px rgba(0, 0, 0, 0.04); backdrop-filter: blur(9.688861846923828px); padding: 20px; position: relative; margin-bottom: 30px;}
.TopicList .card h2 { color: #002248; font-size: 18px; font-weight: 700; line-height: 26px; padding-bottom: 15px;}
.TopicList .btn-yallow{ display: inline-block; width: 100px;}
.TopicList .card span{ position: absolute; top: 10px; right: 15px;}

.batchedwrap .card { border-radius: 10px; border: 0.394px solid var(--White, #FFF); background: linear-gradient(277deg, rgba(255, 255, 255, 0.70) 26.06%, rgba(255, 255, 255, 0.95) 77.72%); box-shadow: 0px 1.094px 21.315px -1.094px rgba(0, 0, 0, 0.04); backdrop-filter: blur(9.688861846923828px); padding: 15px; position: relative; margin-bottom: 30px;}
.batchedwrap .card h2 { color: #002248; font-size: 18px; font-weight: 700; line-height: 26px; padding-bottom: 10px;}
.batchedwrap .btn-green{ background: #0BEC73; color: #fff;}
.batchedwrap .btn-red{ background: #FF7670; color: #fff;}

.TopicDetail .card { border-radius: 10px; border: 0.394px solid var(--White, #FFF); background: linear-gradient(277deg, rgba(255, 255, 255, 0.70) 26.06%, rgba(255, 255, 255, 0.95) 77.72%); box-shadow: 0px 1.094px 21.315px -1.094px rgba(0, 0, 0, 0.04); backdrop-filter: blur(9.688861846923828px); padding: 20px; position: relative; margin-bottom: 30px;}
.TopicDetail .card h2 { color: #002248; font-size: 18px; font-weight: 700; line-height: 26px; padding-bottom: 15px;}
.TopicDetail .card h3 { color: #002248; font-size: 18px; font-weight: 700; line-height: 24px; padding-bottom: 5px;}
.TopicDetail p{ font-size: 17px; line-height: 28px; margin-bottom: 15px;}
.TopicDetail img.power{ width: 100%;}
.card-thumb{ border-radius: 10px; height: 250px; background: #E0AA4B;}
.TopicDetail .card-body p{ font-size: 14px; margin: 0px; padding: 0px;}
.filterview{ text-align: right; margin-bottom: 30px;}
.filterview .btn{ margin-left: 10px;}
.filterview .form-control{ display: inline-block; width: 200px; height: 40px; border-radius: 4px;}
.formview label{ font-size: 14px; margin-bottom: 5px;}
.formview .custom-checkbox{ padding-top: 12px;}
.font-size12{ font-size: 12px;}

/* Payment Mode */
.PaymentLeft{ padding: 20% 11% 0; float: left; height: 100vh; width: 50%; overflow: hidden; background: #002248;}
.PaymentLeft img{ width: 350px;}
.PaymentRight{ width: 50%; padding: 5% 15px 35px; float: right; overflow-y: auto; height: 100vh;}
.PaymentRight h2{ font-size: 24px; color: #002248; font-weight: 800; margin-bottom: 12px; padding: 0px; text-align: center;}
.PaymentRight h3{ font-size: 20px; color: #002248; font-weight: 600; margin-bottom: 25px; padding: 0px; text-align: center;}
.PaymentOffer{ margin: 0 auto; width: 70%;}
.PaymentOffer table{ width: 100%; border: 1px solid #ccc;}
.PaymentOffer tr td{ width: 60%; text-align: left; padding: 12px 25px; font-size: 17px; border: 1px solid #ccc; background: #fff; font-weight: 500;}
.PaymentOffer tr td.title{ width: 40%; text-align: left; font-weight: 700; font-size: 18px;}
.PaymentOffer tr td.price{ width: 100%; font-weight: 700; font-size: 18px; color: #002248;}
.PaymentOffer tr td.price span{ text-decoration: line-through;}
.PaymentOffer tr td.price span.NewPrice{ color: #EEB34C; font-size: 22px; margin-left: 10px; text-decoration: inherit;}
.PaymentOffer tr td .form-check{ color: #666; font-size: 16px;}
.PaymentOffer tr td .form-check a{ color: #002248;}

.green {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0BEC73;
    display: inline-block;
    margin-right: 5px;
  }
.mw-90 {
    min-width: 90px;
}